<template>
	<div class="g-pg">
		<ly-header class="g-hd s-bg-main">
			<div class="m-lst comp-list" slot="middle">
				<div class="itm" @click="openFontDialog"><i class="iconfont icon-font"></i><span>秀字体</span></div>
				<div class="itm" @click="openTextDialog"><i class="iconfont icon-text"></i><span>文本</span></div>
				<div class="itm" @click="openBgDialog"><i class="iconfont icon-background"></i><span>背景</span></div>
				<div class="itm" @click="openMusicDialog"><i class="iconfont icon-music"></i><span>音乐</span></div>
				<div class="itm" @click="openVedioDialog"><i class="iconfont icon-video"></i><span>视频</span></div>
				<div class="itm" @click="openImgDialog"><i class="iconfont icon-picture"></i><span>图片</span></div>
				<div class="itm" @click="openImgsetDialog"><i class="iconfont icon-atlas"></i><span>图集</span></div>
				<div class="itm">
					<nav-mutual />
				</div>
				<div class="itm">
					<nav-form />
				</div>
			</div>
			<div slot="action-btns">
				<!-- <el-button type="success" @click="$router.push('/preview')">预览1222</el-button> -->
				<el-button type="success" @click="preview">预览</el-button>
				<!-- <el-button type="primary" @click="$store.dispatch('saveUserData')">保存</el-button> -->
				<el-button type="primary" @click="saveUserData">保存</el-button>

			</div>
		</ly-header>
		<ly-main class="g-mn">
			<!-- 后续将此处放开加上 -->
			<prop-manage slot="main" />
			<ly-mobile slot="main">
				<the-container />
				<workspace />
			</ly-mobile>
			<page-manage slot="right" />
			<!-- 模板测试 -->
			<test-template slot="left" />
		</ly-main>
		<!-- 背景乐选取 -->
		<pick-music v-if="pickMusic.status" />
		<!-- 图片裁剪 -->
		<cropper-img />
		<!-- 预览弹窗 -->
		<pick-preview v-if="pick_preview" />
		<!-- 表单选取 -->
		<pick-form />
		<!-- 秀字体弹框 -->
		<pick-font />
		<!-- 视频弹框 -->
		<pick-vedio v-if="pick_vedio.status" />
		<!-- 输入框弹框 -->
		<pick-input />
		<!-- 图集裁剪框 -->
		<cropper-imgset v-if="image_librays.cropperImg" />
		<!-- 互动弹框 -->
		<pick-interaction v-if="pickInteraction.status" />
		<!-- 互动中的计数弹框 -->
		<pick-countnumber v-if="pickCountnumber.status" />
		<!-- 图片素材库 -->
		<image-libray v-if="image_librays.status" />
		<!-- 提交按钮 -->
		<pick-submit v-if='pick_submit.status' />
	</div>
</template>
<script>
	export default {
		name: 'index',
		data() {
			return {

			}
		},
		computed: {
			pickInteraction() {
				return this.$store.getters.pickInteraction
			},
			pickMusic() {
				return this.$store.getters.pickBgm
			},
			pickCountnumber() {
				return this.$store.getters.pickCountnumber
			},
			pick_preview() {
				return this.$store.getters.preview
			},
			image_librays() {
				return this.$store.getters.image_libray
			},
			pick_vedio() {
				return this.$store.getters.pickVedio
			},
			pick_submit() {
				return this.$store.getters.pickSubmit
			}
		},
		created() {
			var _self = this;
			document.onkeydown = function(e) {
				const compid = _self.$store.getters.compId
				var key = window.event.keyCode;
				if (key == 46 && compid) {
					_self.$store.dispatch('delDom', compid)
					_self.$store.commit('SET_COMP_ISSHOW', false)
					_self.$store.commit('CLOSE_PROPS_PANEL')
				}
			}
		},
		methods: {
			openMusicDialog() {
				this.$store.commit('SET_PICK_BGM', {
					status: true,
					callback: (bgm) => {
						this.$store.dispatch('setH5', {
							bgm: bgm.src
						})
					}
				})
			},
			// 打开图片弹框
			openImgDialog() {
				this.$store.commit('IMAGE_LIBRAY', {
					status: true,
					type: 'image',
					callback: (result) => {
						this.$store.dispatch('addNewComp', {
							name: 'Image',
							src: result.url
						})
					}
				})
			},
			// 打开文本弹框
			openTextDialog() {
				this.$store.dispatch('addNewComp', {
					name: 'Text',
					text: "点击此处进行编辑"
				})
			},
			//打开背景图片弹窗
			openBgDialog() {
				this.$store.commit('IMAGE_LIBRAY', {
					status: true,
					callback: (result) => {
						this.$store.dispatch('setPageBackImg', result.url)
					}
				})
			},
			//选择秀字体
			openFontDialog() {
				this.$store.commit('SET_PICK_FONT', {
					status: true,
					callback: (result) => {
						this.$store.dispatch('addNewComp', {
							name: 'Font',
							text: result.content
						})
					}
				})

			},
			// 选择视频
			openVedioDialog() {
				this.$store.commit('SET_PICK_VEDIO', {
					status: true,
					callback: (result) => {
						this.$store.dispatch('addNewComp', {
							name: 'Vedio',
							src: result.src
						})
					}
				})
			},
			// 图集弹框
			openImgsetDialog() {
				const store = this.$store
				this.$store.commit('IMAGE_LIBRAY', {
					status: true,
					type: 'imgset',
					cropperImg: false,
					callback: (result) => {
						this.$store.dispatch('setImagesets', result.imgsetUrl)
					}
				})
			},
			// 预览
			preview() {
				// 设置为预览状态
				this.$store.commit('SET_PREVIEW', true)

				// this.$router.push('/preview')
			},
			// 保存数据
			saveUserData() {
				const user_data = JSON.stringify({
					versior: this.$store.getters.versior,
					h5Config: this.$store.getters.h5Config,
					pages: {
						lists: this.$store.getters.pages
					}
				})
				this.$request.save_user_data({
					data: {
						userData: user_data
					},
					success: (result) => {
						console.log(11)
					}
				})
			}
		},
		components: {
			lyHeader: () => import('@/layouts/ly-header'),
			lyMain: () => import('@/layouts/ly-main'),
			lyMobile: () => import('@/layouts/ly-mobile'),
			PageManage: () => import('@/containers/page-manage'),
			TheContainer: () => import('@/views/modules/the-container'),
			PropManage: () => import('@/containers/prop-manage'),
			// PickImage: () => import('@/containers/pick-image/index'),
			PickMusic: () => import('@/containers/pick-music/index'),
			// PickText: () => import('@/containers/pick-text/index'),
			TestTemplate: () => import('@/templates/test/index'),
			CropperImg: () => import('@/containers/pick-image/cropperimg'),
			// PickBackground: () => import('@/containers/pick-background/index'),
			// PickShape: () => import('@/containers/pick-shape/index'),
			PickForm: () => import('@/containers/pick-form/index'),
			PickFont: () => import('@/containers/pick-font/index'),
			PickVedio: () => import('@/containers/pick-vedio/index'),
			// PickImgset: () => import('@/containers/pick-imgset/index'),
			PickInput: () => import('@/containers/pick-input/index'),
			CropperImgset: () => import('@/containers/pick-imgset/cropperimg'),
			PickInteraction: () => import('@/containers/pick-Interaction/index'),
			NavMutual: () => import('@/subnav/nav-mutual/index'),
			NavForm: () => import('@/subnav/nav-form/index'),
			PickCountnumber: () => import('@/containers/pick-Interaction/count_number'),
			workspace: () => import('@/containers/workspace'),
			PickPreview: () => import('@/containers/pick-preview/index'),
			ImageLibray: () => import('@/containers/image-common/index'),
			PickSubmit: () => import('@/containers/pick-submit/index')
		}
	}
</script>

<style lang="scss">
	@import "../assets/styles/variable.scss";

	.g-pg {
		display: flex;
		flex-direction: column;
		flex: 1;
		height: 100%;

		>.g-hd {
			.g-sd {
				padding-right: 20px;

				.el-button {
					width: 56px;
					height: 36px;
					line-height: 36px;
					font-size: 14px;
					background: $system_blue;
					border: none;
					padding: 0;
					border-radius: 2px;

					&:hover {
						background: $hover_color;
					}
				}
			}

		}

		>.g-mn {
			flex: 1;
			flex-basis: auto;
			background: #f9fafd;
		}

		.left {
			width: 280px !important;
		}

		.right {
			width: 260px !important;
		}
	}

	.comp-list {
		text-align: center;

		.itm {
			display: inline-block;
			width: 70px;
			height: 70px;
			padding-top: 12px;
			color: #606266;
			text-align: center;
			cursor: pointer;

			.iconfont {
				display: block;
				font-size: 20px;
				margin-bottom: 10px;
			}

			span {
				display: block;
				font-size: 14px;
			}
		}

		.itm:hover {
			background: #849bfe;
			color: #fff;
		}
	}

	.el-textarea__inner {
		height: 100px;
		resize: none;
	}

	.el-dropdown-menu--small .el-dropdown-menu__item {
		min-width: 113px;
	}

	.el-popover {
		padding: 2px;

		li {
			line-height: 36px;
			cursor: pointer;

			.down-pad {
				padding: 0 15px;

				.iconfont {
					margin-right: 10px;
				}
			}
		}

		li:hover,
		li.active {
			color: #409eff;
			background-color: #ecf5ff;
		}
	}

	.el-dropdown {
		display: block;
		color: inherit;
	}



	.el-slider__runway {
		width: 90%;
		margin-left: 3px;
	}
</style>
